<template>
  <div class="excel-container">
    <upload-excel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></upload-excel>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel/index.vue'
import { batchEmployee } from '@/api/employee'

export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
  methods: {
    // 文件解析之前的校验函数
    beforeUpload(file) {
      // file 用户选择的文件
      // console.log(file);
      // b字节 => kb => M
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        // 文件小于1M，校验通过
        return true
      }
      // 文件大于 1M，校验不通过
      // 提示用户
      this.$message.warning('文件不能大于1M')
      return false
    },
    async onSuccess(data) {
      // console.log(data);
      const relation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      const arr = this.tranData(data.results, relation)
      await batchEmployee(arr)
      // 提示用户
      this.$message.success('批量导入成功')
    },
    // 将中文 key 转换为英文的 key
    tranData(data, relation) {
      // data：转换之前的数据
      // relation：中英文对照关系
      const arr = []
      // 转换过程
      data.forEach(item => {
        // item: { 
        //   '姓名': 'zhangsan',
        //   '年龄': 18
        // }
        const obj = {}
        for (let key in item) {
          // key 是中文key
          // key: '姓名'
          const enkey = relation[key]
          // enkey: 'name'
          // enkey 是英文key
          obj[enkey] = item[key]
        }
        arr.push(obj)
      })
      // console.log(arr);
      // 返回值：转换后的数据
      return arr
    }
  },
  created() {
    const arr = [
      { 
        '姓名': 'zhangsan',
        '年龄': 18
      },
      { 
        '姓名': 'lisi',
        '年龄': 19
      }
    ]
    const relation = {
      '姓名': 'name',
      '年龄': 'age'
    }
    console.log(this.tranData(arr, relation))
  }
}
</script>

<style lang="scss" scoped>
.excel-container{
  padding: 50px;
}
</style>